<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {{template "title"}}
    {{template "commonCss"}}
    {{template "commonJs"}}
    {{template "headerAndFooter"}}
</head>
<body>
{{template "header"}}
<div>
{{/*    <div>*/}}
{{/*        <label>用户名</label>*/}}
{{/*        <input type="text" name="username" id="username">*/}}
{{/*    </div>*/}}
{{/*    <div>*/}}
{{/*        <label>密码</label>*/}}
{{/*        <input type="password" name="password" id="password">*/}}
{{/*    </div>*/}}
{{/*    <div>*/}}
{{/*        <button id="login-btn">登录</button>*/}}
{{/*    </div>*/}}
    <form class="form-container">
        <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input type="text" class="form-control" id="username" placeholder="用户名">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="password" placeholder="密码">
        </div>
        <div style="text-align: center">
            <button type="button" class="btn btn-primary" id="login-btn">登录</button>
        </div>

    </form>

</div>
{{template "footer"}}
<script>
    $("#login-btn").click(function () {
        console.log("点击了");
        $.ajax({
            //请求方式
            type: 'POST',
            //发送请求的地址
            url: '/login',
            //服务器返回的数据类型
            dataType: 'json',
            contentType: "application/json",
            //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
            data: JSON.stringify({
                username: $.trim($("#username").val()),
                password: $.trim($("#password").val())
            }),
            success: function (data) {
                //请求成功函数内容
                if (data.isSuccess) {
                    console.log("登录成功");
                    setTimeout(function () {
                        window.location.href = "/"
                    }, 1000)

                }
            },
            error: function (err) {
                //请求失败函数内容
                console.log("失败", err)
            }

        })
    });
</script>
</body>
</html>